<template>
  <el-dialog
    title="单词库"
    :visible.sync="visible"
    width="70%"
    :before-close="handleBeforeClose"
    :close-on-click-modal="false"
    class="word-dialog"
  >
    <div class="dialog-body">
      <!-- 搜索栏 -->
      <el-form :inline="true" size="small" @submit.native.prevent>
        <el-form-item>
          <el-input
            v-model="searchForm.word"
            placeholder="请输入单词"
            clearable
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格（滚动区域） -->
      <div class="table-wrapper">
        <el-table
          :data="tableData"
          border
          style="width: 100%;"
          height="100%"
        >
          <el-table-column type="index" label="序号" width="60" align="center"/>
          <el-table-column prop="fullSpell" label="单词" align="center">
            <template #default="{ row }">
              <div style="display: flex;align-items: center">
                <el-tag style="cursor: pointer">{{ row.fullSpell ? row.fullSpell : row.wordFullSpell }}</el-tag>
                <audio-playback
                  style="margin-left: 5px;display: flex;align-items: center;justify-items: center"
                  :full-spell="row.fullSpell ? row.fullSpell : row.wordFullSpell"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="wordMeaning" label="释义" align="center"/>
        </el-table>
      </div>

      <!-- 分页（固定底部） -->
      <div class="pagination-wrapper">
        <el-pagination
          :total="total"
          :current-page="pageBean.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageBean.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { queryPageWord } from '@/api/wordSystemLibraryType'
import AudioPlayback from '@/views/component/audioPlayback.vue'

export default {
  name: 'WordDialog',
  components: { AudioPlayback },
  props: {
    value: Boolean,
    libId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      visible: this.value,
      searchForm: { word: '' },
      tableData: [],
      total: 0,
      pageBean: { pageNum: 1, pageSize: 20 }
    }
  },
  watch: {
    'value'(val) {
      this.visible = val
      if (val && this.libId) {
        this.pageBean.pageNum = 1
        this.getTableData()
      }
    },
    'visible'(val) {
      this.$emit('input', val)
    },
    'libId'(newVal) {
      if (this.visible && newVal) {
        this.pageBean.pageNum = 1
        this.getTableData()
      }
    },
    'searchForm.word'(val) {
      this.pageBean.pageNum = 1
      if (!val) {
        this.getTableData()
      }
    }
  },
  methods: {
    async getTableData() {
      const res = await queryPageWord({
        page: this.pageBean,
        param: {
          libTypeId: this.libId,
          fullSpell: this.searchForm.word || undefined
        }
      })
      this.tableData = res.records || res || []
      this.total = res.total * 1 || this.tableData.length
    },
    handleSearch() {
      this.pageBean.pageNum = 1
      this.getTableData()
    },
    handleReset() {
      this.searchForm.word = ''
      this.pageBean.pageNum = 1
      this.getTableData()
    },
    handleSizeChange(size) {
      this.pageBean.pageSize = size
      this.getTableData()
    },
    handleCurrentChange(page) {
      this.pageBean.pageNum = page
      this.getTableData()
    },
    handleBeforeClose(done) {
      done()
    }
  }
}
</script>

<style scoped>
.word-dialog >>> .el-dialog__body {
  padding: 10px; /* 去掉默认内边距，方便自定义布局 */
  height: 70vh; /* 固定对话框高度 */
  display: flex;
  flex-direction: column;
}

.dialog-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table-wrapper {
  flex: 1; /* 占满中间空间 */
  overflow: auto; /* 滚动 */
}

.pagination-wrapper {
  padding: 10px;
  text-align: right;
  border-top: 1px solid #eee;
}
</style>
